<template>
  <view>
    <u-navbar title="体重管理" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <image :src="img_url + banner" mode="widthFix" style="width: 100%"></image>
    <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 37rpx 31rpx">
      <view class="" style="font-size: 30rpx; font-weight: bold">当前状况</view>
      <view class="" style="font-size: 26rpx; color: #999999" @tap="show = true">正常参考范围></view>
    </view>
    <!-- 身高 -->
    <view class="" style="font-size: 28rpx; display: flex; align-items: center; justify-content: center; margin-top: 50rpx" v-if="list[0]">
      <view class="" style="text-align: center">
        <view class="" style="font-size: 34rpx; font-weight: bold">
          {{ list[0].value_one }}
        </view>
        <view class="" style="padding-top: 10rpx">身高cm</view>
      </view>

      <view class="" style="text-align: center; padding-left: 141rpx; padding-right: 147rpx">
        <view class="" style="font-size: 34rpx; font-weight: bold">
          {{ list[0].value_two }}
        </view>
        <view class="" style="padding-top: 10rpx">体重kg</view>
      </view>

      <view class="" style="text-align: center">
        <view class="" style="font-size: 34rpx; font-weight: bold">
          {{ list[0].value_three }}
        </view>
        <view class="" style="padding-top: 10rpx">BMI</view>
      </view>
    </view>
    <view class="" style="font-size: 30rpx; font-weight: bold; padding: 60rpx 28rpx 0 28rpx">体重记录</view>
    <view class="" style="margin: 0 28rpx; height: 1rpx; background: #e7e7e7; margin-top: 28rpx"></view>
    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="weight">
      <!-- 记录数据 -->
      <view
        class=""
        style="font-size: 26rpx; color: #666666; padding: 15rpx 28rpx; display: flex; align-items: center; justify-content: space-between"
        v-for="(i, k) in list"
        :key="k"
      >
        <view class="">
          {{ i.measure_time_text }}
        </view>
        <view class="">{{ i.value_two }}kg {{ i.value_three }}BMI</view>
      </view>
    </scroll-view>

    <view class="" style="position: absolute; width: 100%; bottom: 0">
      <view class="btn" @tap="jl">记录体重</view>
    </view>
    <u-popup v-model="show" mode="bottom" border-radius="30">
      <view style="font-size: 32rpx; text-align: center; padding-top: 80rpx">参考值</view>
      <!-- <view class="" style="font-size: 28rpx;padding-top: 38rpx;text-align: center;">
				偏轻：小于18.5
			</view>
			<view class="" style="font-size: 28rpx;padding-top: 38rpx;text-align: center;">
				正常：18.5~23.9
			</view>
			<view class="" style="font-size: 28rpx;padding-top: 38rpx;text-align: center;">
				偏重：24~27.9
			</view>
			<view class="" style="font-size: 28rpx;padding-top: 38rpx;text-align: center;padding-bottom: 88rpx;">
				肥胖：大于等于28
			</view> -->
      <view class="" style="padding: 28rpx">
        <rich-text :nodes="tey"></rich-text>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      show: false,
      id: null,
      page: 1,
      list: [],
      banner: '',
      boxHeight: '',
      tey: ''
    };
  },
  onReady() {
    this.box();
  },
  methods: {
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },
    jl() {
      uni.navigateTo({
        url: '/home/tzrecord/tzrecord'
      });
    },
    weight(e) {
      if (e == 1) {
        this.list = [];
        this.page = 1;
      }
      this.api({
        url: '/api/healthy/getDataList',
        method: 'post',
        data: {
          page: this.page,
          type: this.id
        }
      }).then((res) => {
        this.list = this.list.concat(res.data);
        this.page++;
      });
    }
  },
  onLoad(op) {
    this.id = op.id;
    this.banner = op.banner;
    this.api({
      url: '/api/index/text',
      method: 'post',
      data: {
        text: 'height_text'
      }
    }).then((res) => {
      this.tey = res.data;
    });
  },
  onShow() {
    this.weight(1);
  }
};
</script>

<style>
.btn {
  margin: 99rpx 115rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
  line-height: 80rpx;
}
</style>
